<script setup>

import {Delete, Edit, Plus} from "@element-plus/icons-vue";
import {ref} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {deleteDrinks, insertDrinks, listDrinks, updateDrinks} from "@/api/drinks.js";
//分页
const pageNum = ref(1)//当前页
const total = ref(20)//总条数
const pageSize = ref(7)//每页条数

//数据表展示
const drinksListData = ref([])

//根据id搜索
const id = ref('')
const form = ref(null)
const formLabelWidth = '160px'

const titleName = ref('')

//添加及修改框是否可见
const dialogFormVisible = ref(false)


//增加及修改的数据模型
const formData = ref({
  id: '',
  type: '',
  price: '',
  name: '',
})


//重置数据模型
const resetForm = () => {
  formData.value = {
    id: '',
    type: '',
    price: '',
    name: '',
  }
}

//表单筛选规则
const rules = {
  id: [
    {required: true, message: '请输入编号', trigger: 'blur'},
  ],
  type: [
    {required: true, message: '请输入类型', trigger: 'blur'},
  ],
  price: [
    {required: true, message: '请输入价格', trigger: 'blur'},
  ],
  name: [
    {required: true, message: '请输入名称', trigger: 'blur'},
  ]
}

//获取商品表
const getDrinksList = () => {
  const params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    id: id.value
  }
  listDrinks(params).then(res => {
    drinksListData.value = res.data.records
    total.value = res.data.total
    console.log(res)
  })
}
getDrinksList()


//重置搜索框
const resetParams = () => {
  id.value = ''
  getDrinksList()
}


// 当每页条数发生了变化，会调用
const handleSizeChange = (val) => {
  pageSize.value = val
  getDrinksList()
}


// 当前页面发生变化，会调用
const handleCurrentChange = (val) => {
  pageNum.value = val
  getDrinksList()
}


//删除
const deleteById = (id) => {
  ElMessageBox.confirm(
      '是否删除，删除后不可恢复?',
      '提醒',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    deleteDrinks(id).then(res => {
      if (res.status) {
        ElMessage.success('删除成功')
        getDrinksList()
      }
    })
  })
      .catch(() => {
      })
}

//编辑表单
const showEditDialog = (row, tile) => {
  titleName.value = tile
  formData.value = {
    ...row
  }
  dialogFormVisible.value = true
}


// 添加表单
const showAddDialog = (title) => {
  resetForm()
  titleName.value = title
  dialogFormVisible.value = true
}


// 添加
const addDrinks = () => {
  form.value.validate((valid) => {
    if (valid) {
      insertDrinks(formData.value).then(res => {
        if (res.status) {
          getDrinksList()
          ElMessage.success("添加成功")
          dialogFormVisible.value = false
        }
      })
    }
  })
};


//编辑
const editDrinks = () => {
  updateDrinks(formData.value).then(res => {
    if (res.status) {
      getDrinksList()
      ElMessage.success("更新成功")
      dialogFormVisible.value = false
    }
  })
}

</script>

<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>饮品管理</span>
        <div class="extra">
          <el-button type="primary" @click="showAddDialog('添加饮品')">添加饮品</el-button>
        </div>
      </div>
    </template>
    <!-- 搜索表单 -->
    <el-form inline>
      <el-form-item label="饮品编号：">
        <el-input v-model="id" placeholder="请输入饮品编号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getDrinksList">搜索</el-button>
        <el-button @click="resetParams">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="drinksListData" style="width: 100%">
      <el-table-column label="编号" prop="id"></el-table-column>
      <el-table-column label="名称" prop="name"></el-table-column>
      <el-table-column label="类型" prop="type"></el-table-column>
      <el-table-column label="价格" prop="price"></el-table-column>
      <el-table-column label="操作" width="100">
        <template #default="{ row }">
          <el-button :icon="Edit" circle plain type="primary" @click="showEditDialog(row,'编辑饮品')"></el-button>
          <el-button :icon="Delete" circle plain type="danger" @click="deleteById(row.id)"></el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="没有数据"/>
      </template>
    </el-table>

    <!--分页条-->
    <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[5 ,10, 15]"
                   layout="jumper, total, sizes, prev, pager, next" background :total="total"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange" style="margin-top: 20px; justify-content: flex-end"/>
  </el-card>


  <!--添加组件-->
  <el-dialog v-model="dialogFormVisible" :title="titleName" width="500">
    <el-form ref="form" :model="formData" label-position="top" :rules="rules">

      <el-form-item label="编号" :label-width="formLabelWidth" prop="id">
        <el-input v-model="formData.id" autocomplete="off" placeholder="请输入编号"/>
      </el-form-item>

      <el-form-item label="名称" :label-width="formLabelWidth" prop="name">
        <el-input v-model="formData.name" autocomplete="off" placeholder="请输入名称"/>
      </el-form-item>

      <el-form-item label="类型" :label-width="formLabelWidth" prop="type">
        <el-select v-model="formData.type" placeholder="请选择类型">
          <el-option label="碳酸饮料" value="碳酸饮料" />
          <el-option label="矿泉水" value="矿泉水" />
          <el-option label="鸡尾酒" value="鸡尾酒" />
          <el-option label="啤酒" value="啤酒" />
        </el-select>
      </el-form-item>

      <el-form-item label="价格" :label-width="formLabelWidth" prop="price">
        <el-input v-model="formData.price" autocomplete="off" placeholder="请输入价格"/>
      </el-form-item>


    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="titleName ==='添加饮品'?addDrinks():editDrinks()">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>

</template>

<style scoped lang="scss">
.page-container {
  min-height: 100%;
  box-sizing: border-box;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

.demo-datetime-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}

.demo-datetime-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}

.demo-datetime-picker .block:last-child {
  border-right: none;
}

.demo-datetime-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>